<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>jscript07문서객체모델</title>
		<!-- <base href="http://127.0.0.1:8020/JavaScript/" /> -->
	</head>

	<body>
	<h3>문서객체모들DOM</h3>
	<p>HTML 문서의 모든요소를 다루거나 변경할 수 있게 해 줌</p>
	<p>브라우저는 HTML 문서를 읽으면 내부적으로 문서객체모델을 생성함</p>
	<p>문서객체모델에는 core DOM</p>
	<p>문서객체모델은 html 태그와 텍스트를 객체화해서 계층적으로 표현한 것을 의미</p>
	<p>텍스트를 객체화해서 계층적으로 표현한 것을 의미 </p>
	<p>자바스크립트와 DOM으로 HTML문서의 모든 요소를 다루거나 변경할 수 있게해줌.</p>
	
	<hr />
	<h3> DOM basic </h3>
   <p>DOM에서 html의 모든 요소는 객체로 취급</p>
   <p>요소를 선택하려면 document 객체에서 제공하는 여러 메서드를 사용하면 됨</p>
   <p>getElementByld() : id로 객체 선택</p>
   <p>getElementByTagName() : 태그명으로 객체선택</p>
   <p>getElementByClassName():클래스명으로 객체선택</p>
   <p>forms[] : 폼 요소로 객체 선택</p>
   <p>images[] : 이미지 요소로 객체 선택</p>
   <p>anchors[] : 링크 요소로 객체 선택</p>
   <hr />
   <p id="find2id"> </p><button type="button" onclick="findid();">id로 찾기</button>
   <span> </span><button type="button" onclick="findtag();">태그로 찾기</button>
   <form name="login">
   	<input type="text" name="uid" /><br />
   	<input type="password" name="pwd" />
   	<button type="button" onclick="checklogin()">입력완료</button>
   </form>
   <script type="text/javascript">
      function findid(){
         var find2id = document.getElementById("find2id");
         find2id.innerHTML += "이글이 보이시나요?";
      }
      function findtag(){
         var span = document.getElementsByTagName("span");
         span[0].innerHTML +=" 이글도 보이나요?";
      }
      function checklogin(){
      	var frm =  document.forms.login;
      	if(frm.uid.value == "")
      		alert("아이디를 입력하세요!!!");
      	else if(frm.pwd.value =="")
      		alert("비밀번호를 입력하세요!!");
      	else
      		alert("입력한 아이디는 " + frm.uid.value +"\n"+ "그리고 후후후 입력하신 비밀번호가 " + frm.pwd.value +" 군요");
      }
      </script>
      <h3>DOM 출력제어</h3>
      <p>document.write() : html 출력스트림에 쓰기</p>
      <p>객체명.innerHTML : html 요소의 내용변경</p>
      <p>객체명.attribute : html 요소의 속성 변경</p>
      <p>객체명.style.attribute : html 요소의 스타일 변경</p>
      <img src="./images/_Z9X91581.jpg" />
      <button type="button" onclick="chgimg()">그림바꾸기</button>
      <h2>Welcome to HTML DOM!!</h2>
      <button type="button" onclick="chgh2()">스타일 바꾸기</button>
      <button type="button" onclick ="modal()">모달창 만들기</button>
      <script type= "text/javascript">
      	document.write("이글 또한 보이나요?");
      	function chgimg () {
      		var img = document.getElementsByTagName("img");
      		img[0].src="images/rine_1.jpg";
      }
  		function chgh2(){
  			var h2 = document.getElementsByTagName("h2");
  			h2[0].style.color="red";
  			h2[0].style.fontStyle="italic";
  			h2[0].style.textDecoration = "underline";
  		}
  		function modal(){
  			var shadow = document.getElementById("shadow");
  			var popup = document.getElementById("popup");
  			
  			var d1 = document.documentElement;
  			var d2 = document.body;
  			var sx = Math.max(d2.clientWidth ,
  					d1.offsetWidth, d2.offsetWidth ,
  					d1.scrollWidth , d2.scrollWidth) ; 
  			var sy = Math.max(d2.clientHeight ,
  					d1.offsetHeight , d2.offsetHeight ,
  					d1.scrollHeight , d2.scrollHeight);
  			// offsetWidth, offsetHeight
  			// 화면에서 보여지는 영역 크기
  			// MSIE의 DHTML Object Model
  			// clientWidth, clientHeight
  			// 화면에서 보여지는 영역에서
  			// 테두리만을 제외한 크기
  			// MSIE의 DHTML Object Model
  			// scrollWidth, scrollHeight
  			// 화면에서 보여지는 스크롤 영역
  			// MSIE의 DHTML Object Model
  			// var ss = clientHeight || offsetHefgt 이런식으로하면 맞는값이 알아서 들어감
  			shadow.style.width = sx + "px";
  			shadow.style.height = sy + "px";
  			shadow.style.top =0;
  			shadow.style.left =0;
  			shadow.style.background ="black";
  			shadow.style.position ="fixed";
  			shadow.style.opacity ="0.8";
			var cy = (screen.availHeight/2) -125;
			var cx = (screen.availWidth/2) - 175;
  			popup.style.width ="350px";
  			popup.style.height ="250px" ;
  			popup.style.top = cy + "px";
  			popup.style.left = cx + "px";
  			popup.style.background ="white";
  			popup.style.position ="fixed";
  			shadow.style.display = "block";
  			popup.style.display = "block";
  		}
  		function cmodal(){
  			var shadow = document.getElementById("shadow");
  			var popup = document.getElementById("popup");
  			shadow.style.display = "none";
  			popup.style.display = "none";
  		}
      </script>     
	<div id="shadow">	
	</div>      
	<div id="popup" style="display: none;">
		<button type="button"
			onclick="cmodal()">닫기</button>
	</div>      
	</body>
</html>